{% extends 'layout/body.html' %}
{% block title %}
    课程管理
{% endblock %}
{% block content %}
    <div class="container">
        <div class="row mt-2">
            <div class="col-12 text-right">
                <a class="btn btn-primary" href="{{ url_for('course.add') }}"><i class="bi bi-plus-lg"></i>新增</a>
            </div>
            {% raw %}
            <div class="col-12 mt-2" id="app">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>名称</th>
                        <th>学时</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(course, index) in courses">
                        <td>{{ index + 1 }}</td>
                        <td>{{ course.name }}</td>
                        <td>{{ course.hours }}</td>
                        <td><a @click.prevert="onDelete(course, index)"><i class="text-danger bi bi-trash"></i></a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            {% endraw %}
        </div>
    </div>

    <script>
        const {createApp, ref} = Vue;
        createApp({
            data() {
                return {
                    courses: []
                }
            },
            methods: {
                onDelete: function (course, index) {
                    axios.delete(`/course/delete/${course.id}`)
                        .then(() => {
                            this.courses.splice(index, 1);
                        })
                        .catch(error => {
                            console.error("请求出错：", error);
                        });
                }
            },
            mounted() {
                // 发起 HTTP 请求
                axios.get('/course/all')
                    .then(response => {
                        this.courses = response.data;
                    })
                    .catch(error => {
                        console.error("请求出错：", error);
                    });
            }
        }).mount('#app')
    </script>

{% endblock %}
